<%@ page import="static com.xnx3.j2ee.shiro.ShiroFunc.getUserId" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>二维码</title>
</head>
<body>
<div style="width: 100%;height:100%;">
    <head class="wangYeDeYanSe">
        <script src="http://res.weiunity.com/layer/layer.js" type="text/javascript"></script>
        <meta charset="utf-8" class="wangYeDeYanSe">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" class="wangYeDeYanSe">
        <meta name="renderer" content="webkit" class="wangYeDeYanSe">
        <meta name="viewport" content="width=device-width, initial-scale=1" class="wangYeDeYanSe">
        <link rel="stylesheet" href="//static.clewm.net/static/css/page-index-screen_4291488.css" class="wangYeDeYanSe">
        <link rel="icon" href="//static.clewm.net/static/images/favicon.ico" mce_href="/static/images/favicon.ico"
              type="image/x-icon" class="wangYeDeYanSe">
        <link rel="shortcut icon" href="//static.clewm.net/static/images/favicon.ico"
              mce_href="/static/images/favicon.ico" type="image/x-icon" class="wangYeDeYanSe">
        <link rel="canonical" href="http://cli.im/" class="wangYeDeYanSe">
        <link rel="stylesheet" href="//static.clewm.net/cli/flatkit/assets/bootstrap/dist/css/bootstrap.min.css"
              class="wangYeDeYanSe">
        <link rel="stylesheet" href="//static.clewm.net/cli/flatkit/assets/styles/app.min.css" class="wangYeDeYanSe">
        <link rel="stylesheet" href="//static.clewm.net/cli/flatkit/assets/styles/cli_global.css?v=20180705"
              class="wangYeDeYanSe">
        <link rel="stylesheet" href="//static.clewm.net/cli/flatkit/assets/font-awesome/css/font-awesome.min.css"
              class="wangYeDeYanSe">
        <link rel="stylesheet" href="//static.clewm.net/cli/css/clicon.css?v=20180703" class="wangYeDeYanSe">
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="//static.clewm.net/cli/flatkit/assets/bootstrap/dist/css/bootstrapieV2.css">
        <script src="//static.clewm.net/cli/js/lib/plug/respond.min.js"></script>
        <script src="//static.clewm.net/cli/js/lib/plug/html5shiv.min.js"></script><![endif]-->
        <script async="" src="https://static.clewm.net/public/analytics.js" class="wangYeDeYanSe"></script>
        <script src="//hm.baidu.com/hm.js?56f2b333790f96ef48c2bd70c8c13f16" class="wangYeDeYanSe"></script>
        <script src="//static.clewm.net/cli/js/lib/jquery191.js" class="wangYeDeYanSe"></script>
        <script src="//static.clewm.net/cli/flatkit/libs/jquery/bootstrap/dist/js/bootstrap_V3.js"
                class="wangYeDeYanSe"></script>
        <script src="//static.clewm.net/static/js/lib/sea_3c3cab9.js" class="wangYeDeYanSe"></script>
        <script class="wangYeDeYanSe">
            var CLI_DOMAIN = 'cli.im',
                USER_DOMAIN = 'user.cli.im',
                BIZ_DOMAIN = 'biz.cli.im',
                QRAPI_DOMAIN = 'qrapi.cli.im',
                STATIC_SERVICE = 'static.clewm.net/cli';
        </script>
        <script src="//static.clewm.net/static/js/common_d5afedb.js" class="wangYeDeYanSe"></script>
        <script type="text/javascript" class="wangYeDeYanSe">
            var account = '';
            var tokenId = '';
        </script>
        <script charset="utf-8" src="//static.clewm.net/cli/js/getCapacityTips.js?v=20180717"
                class="wangYeDeYanSe"></script>
        <script src="//static.clewm.net/static/js/sea-config_ddcaed0.js" class="wangYeDeYanSe"></script>
        <style type="text/css" id="wangYeDeYanSeid">.wangYeDeYanSe {
            color: #dce8d5 "," #383b30 !important;
            background-color: #306330 "," #f8e0cb !important
        }

        a:link {
            text-decoration: underline;
        }</style>
    </head>
    <body class="wangYeDeYanSe"><!--[if lt IE 9]>
    <div class="white p-y-md text-center">
        <div class="w-1000">
            您正在使用的浏览器版本过低，将不能正常浏览本网站。建议<a class="text-blue link" href="//browsehappy.com/" target="_blank">升级您的浏览器</a>。
        </div>
    </div><![endif]-->
    <script type="text/javascript" class="wangYeDeYanSe">
        seajs.use('common');
    </script>
    <link rel="stylesheet" href="//static.clewm.net/cli/css/cli_head_top.css?v=20180719" class="wangYeDeYanSe">
    <script class="wangYeDeYanSe">
        var account = '';
        var tokenId = '';
    </script>
    <script src="//static.clewm.net/cli/js/cli_head_top.js?v=20180714" class="wangYeDeYanSe"></script>
    <script src="//static.clewm.net/cli/js/slide_top_index_v2.js?v=20180719" class="wangYeDeYanSe"></script>
    <style class="wangYeDeYanSe">
        .top-menu-solution .linkCotent {
            position: absolute;
            top: 64px;
            left: -270px;
            box-shadow: 0 0 4px 0 rgba(120, 130, 140, 0.25);
            z-index: 1000;
            display: none;
        }

        .top-menu-solution:hover .linkCotent {
            display: block;
        }

        .top-menu-solution .buildingLinks, .top-menu-solution .equipmentLinks {
            height: 270px;
        }

        .top-menu-solution .compositeLinks {
            height: 270px;
        }
    </style>
    <div class="clearfix wangYeDeYanSe"></div>
    <input type="hidden" id="STATICURL" value="//static.clewm.net/cli">
    <link rel="stylesheet" href="//static.clewm.net/cli/css/cli_head_navigation.css?v=20180714" class="wangYeDeYanSe">
    <style type="text/css" class="wangYeDeYanSe">
        .urlMes {
            margin-bottom: -10px;
        }

        .desc-wrap-tx {
            height: 280px;
        }

        .qrcomplete-result {
            padding-top: 70px;
            min-height: 300px;
        }

        .qrcomplete-result .qrcomplete-result-title {
            font-size: 16px;
            margin: 0 auto;
            text-align: center;
            font-weight: 400;
            color: #999999;
            margin-bottom: 16px;
        }

        .qrcomplete-result-box {
            padding: 20px;
            color: #000;
            font-size: 20px;
            text-align: center;
            background-color: #fff;
        }

        .result-tip-qrinfo {
            padding: 10px 0;
            margin: 0 auto;
            width: 660px;
            text-align: center;
            font-size: 16px;
            color: #999;
        }

        .result-tip-update {
            font-size: 14px;
        }

        #top-nav-home {
            color: #4caf50;
            font-weight: bold;
        }
    </style>
    <div class="wrapper grey-100 wangYeDeYanSe">
        <div class="w-1000 p-y p-t wangYeDeYanSe">
            <div class="alert alert-warning none wangYeDeYanSe" id="VerifyTip"></div>
            <div class="row p-t-sm noMagrin wangYeDeYanSe">
                <script type="text/javascript"
                        src="//static.clewm.net/cli/js/lib/plug/jquery.placeholder.min.js"></script>
                <![endif]-->
                <link rel="stylesheet" href="//static.clewm.net/static/css/include-qrfun_6e19087.css"
                      class="wangYeDeYanSe">
                <script src="//static.clewm.net/static/js/lib/plug/jquery-ui-slider.min_6472937.js"
                        class="wangYeDeYanSe"></script>
                <script src="//static.clewm.net/cli/js/lib/plug/jceb.msgtip.js" class="wangYeDeYanSe"></script>
                <script src="//static.clewm.net/static/js/include-qrfun_1138983.js" class="wangYeDeYanSe"></script>
                <div class="qrbox col-md-4 wangYeDeYanSe" id="qrfun-box"
                     style="padding: 0px;width: 70%;float: left;">
                    <div class="qrcode wangYeDeYanSe" style="margin-left: 0px;">
                        <div class="qrimage-wrap white b-a text-center wangYeDeYanSe" qrimage-wrap=""
                             style="margin-left: 0px">
                            <table class="wangYeDeYanSe">
                                <tbody class="wangYeDeYanSe">
                                <tr class="wangYeDeYanSe">
                                    <td id="imgShow" width="240px" height="240px" class="wangYeDeYanSe">
                                        <img id="qrimage"
                                             src="${qrCodePath}"
                                             class="wangYeDeYanSe">
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="qrcode-download text-center wangYeDeYanSe">
                            <div class="btn green btn-block wangYeDeYanSe" id="download" style="font-size: 12px">下&nbsp;&nbsp;&nbsp;&nbsp;载</div>
                        </div>
                        <%--<div class="qrcode-download text-center wangYeDeYanSe">--%>
                        <%--<div class="btn green btn-block wangYeDeYanSe"><p class="pointer text-right wangYeDeYanSe"--%>
                        <%--style="text-align: center"--%>
                        <%--id="download-more">其它格式</p></div>--%>
                        <%--</div>--%>
                    </div>
                    <div class="tools wangYeDeYanSe" id="tools" style="margin-right: 0px;margin-top: -28%">

                        <ul class="row no-gutter text-darkgrey text-center tits wangYeDeYanSe" id="tools-tits_ojj">
                            <li class="col-md-3 col-sm-3 wangYeDeYanSe on" id="colorselect">颜色</li>
                            <li class="col-md-3 col-sm-3 wangYeDeYanSe">LOGO</li>
                        </ul>
                        <div class="boxs p-x-sm wangYeDeYanSe" id="tools-boxs">
                            <div class="tools-box color p-t-sm none wangYeDeYanSe" style="display: block;">
                                <ul class="wangYeDeYanSe">
                                    <li class="wangYeDeYanSe"><span class="wangYeDeYanSe">前景</span>
                                        <div class="colorpal wangYeDeYanSe">
                                            <div id="icp_fgcolor" class="colorPicker-picker cp">
                                                <input type="color" id="onchange" value="${frontViewColor}"
                                                       style="width: 28px;height: 29px">
                                            </div>
                                            <div id="icp_fgcolor1" class="colorPicker-picker cp wangYeDeYanSe"
                                                 style="background-color:#000000"></div>
                                        </div>
                                    </li>
                                    <li class="pos-rlt wangYeDeYanSe"><span class="wangYeDeYanSe">背景</span>
                                        <div class="colorpal wangYeDeYanSe">
                                            <div id="icp_bggcolor" class="colorPicker-picker cp">
                                                <input type="color" id="onchange1" value="${backgroundColor}"
                                                       style="width: 28px;height: 29px">
                                            </div>
                                        </div>
                                        <input type="text" id="colorvalue1" value="#ffffff" style="display:none;"><i
                                                class="fa fa-ban wangYeDeYanSe" id="bgc"></i></li>

                                </ul>
                                <div class="clearfix wangYeDeYanSe"></div>
                            </div>


                            <div class="tools-box icons p-t-sm  wangYeDeYanSe" style="display: none;">
                                <div class="add pos-rlt wangYeDeYanSe"><input id="icon_img" name="icon_img"
                                                                              type="hidden" value="">
                                    <div class="row wangYeDeYanSe">
                                        <div class="col-md-6 col-sm-6 wangYeDeYanSe">
                                            <form class="btn-block form-file wangYeDeYanSe"
                                                  enctype="multipart/form-data" target="iconupload"><input
                                                    type="file" id="file" name="Filedata" multiple="multiple"
                                                    class="addFile_btn" uptype="icon">
                                                <button class="btn btn-block white wangYeDeYanSe"
                                                        style="font-size: 12px;line-height: 12px;height: 28px;width: 100px;margin-left: 20px;"
                                                        type="button">上传 LOGO
                                                </button>
                                            </form>

                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="qrcode-download text-center wangYeDeYanSe" id="redef"
                                 style="margin-top: 30px; display: block;width: 120px;float: left;">
                                <div class="btn green btn-block wangYeDeYanSe" id="redefStyle" style="font-size: 12px">默认样式</div>
                            </div>
                            <div class="qrcode-download text-center wangYeDeYanSe"
                                 style="width: 120px;float: right;margin-top:30px">
                                <div class="btn green btn-block wangYeDeYanSe" id="generate" style="font-size: 12px">生成二维码</div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 40%;font-size: 12px">
                        <p> 1.注意：生成二维码后，建议自己扫一下。</p>
                       <p> 2.如果扫了后没有反应，可能是网络延迟导致二维码生成不成功，建议重新生成一次。</p>
                       <p> 3.背景颜色建议使用白色</p>
                    </div>
                    <script class="wangYeDeYanSe">

                        <%--还原默认设置--%>
                        $('#redef').click(function () {
                            $("#onchange").attr("value", "#000000");
                            $("#onchange1").attr("value", "#FFFFFF");
                            generate("#000000","#FFFFFF");
                        });

                        $("#onchange").change(function () {
                                var onchange=$('#onchange').val();
                            var onchange1=$('#onchange1').val();
                            generate(onchange,onchange1);

                        })
                        $("#onchange1").change(function () {
                            var onchange=$('#onchange').val();
                            var onchange1=$('#onchange1').val();
                            generate(onchange,onchange1);
                        })
                        <%--图片下载--%>
                        $('#download').click(function () {
                            <%--$.ajax({--%>
                                <%--url: '<%=basePath %>QrCodeController/downloadPic.do',--%>
                                <%--type: 'post',--%>
                                <%--dataType: 'json',--%>
                                <%--data: {--%>
                                    <%--url: $('#qrimage')[0].src--%>
                                <%--}, success(res) {--%>
                                    <%--alert(1);--%>
                                <%--}--%>
                            <%--});--%>
                            var name='<%=getUserId()%>';
                            downloadIamge('#qrimage',name);
                        });
                       <!--- 图片下载不用掉后台 -->
                        function downloadIamge(selector, name) {
                            var image = new Image()
                            // 解决跨域 Canvas 污染问题
                            image.setAttribute('crossOrigin', 'anonymous')
                            image.crossOrigin="anonymous";
                            image.onload = function () {
                                var canvas = document.createElement('canvas')
                                canvas.width = image.width
                                canvas.height = image.height

                                var context = canvas.getContext('2d')
                                context.drawImage(image, 0, 0, image.width, image.height)
                                var url = canvas.toDataURL('image/png')

                                // 生成一个a元素
                                var a = document.createElement('a')
                                // 创建一个单击事件
                                var event = new MouseEvent('click')

                                // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                                a.download = name || '下载图片名称'
                                // 将生成的URL设置为a.href属性
                                a.href = url

                                // 触发a的单击事件
                                a.dispatchEvent(event)
                            }

                            image.src = document.querySelector(selector).src;
                        }

                        $("#onchange").on("change", (e) => {
                            console.log(e.target.value + "")
                        })
                        $('#file').change(function () {
                            getUpload()
                        })

                        function getUpload() {
                            var formData = new FormData();
                            var files = document.getElementById("file").files;
                            for (var i = 0; i < files.length; i++) {
                                formData.append('file', $('#file')[0].files[i]);
                            }
                            var onchange=$('#onchange').val();
                            var onchange1=$('#onchange1').val();
                            $.ajax({
                                url: '<%=basePath %>QrCodeController/uploadLogoQrCode.do',
                                type: 'POST',
                                dataType: "json",
                                cache: false,
                                data: formData,
                                processData: false,
                                contentType: false
                            }).done(function (res) {
                                generate(onchange,onchange1);
                                document.getElementById("img").src = res.data;
                            }).fail(function (res) {
                                console("失败");
                            });
                        }

                        // $('#generate').click(function () {
                        $('#generate').click(function () {
                            var onchange=$('#onchange').val();
                            var onchange1=$('#onchange1').val();
                            generate(onchange,onchange1);
                        })
                        function generate(onchange,onchange1) {
                            $.ajax({
                                url: '<%=basePath%>QrCodeController/getQrCode.do',
                                post: 'post',
                                dataType: "json",
                                data: {
                                    BLACK:onchange,
                                    WHITE:onchange1,
                                },
                                success: function (res) {

                                    $("#imgShow").empty();
                                    let img = "<img src=" + res.qrCodeList[0].qrCodePath + ">"
                                    $("#imgShow").append($(img))
                                    // $('#qrimage').attr('src', res.qrCodeList[0].qrCodePath)
                                    // self.location.reload();
                                }
                            })
                        }
                    </script>
                </div>
            </div>
            <meta name="robots" content="nofollow,noindex,noarchive" class="wangYeDeYanSe">
            <link rel="stylesheet" href="//static.clewm.net/static/css/include-complete_ad0e2d6.css"
                  class="wangYeDeYanSe">
            <script class="wangYeDeYanSe">        var data_info = "http%3A%2F%2Fwww.baidu.com";   //  二维码编码字符
            var qrtype = "static";  // 码类型 （static or active）
            var data_type = "url";
            var code_type = "";
            codetype = code_type;
            $(function () {
                if (codetype != 'qr' && codetype != '') {
                    var codename = $('[data-codetype="' + codetype + '"]').html();
                    $('#codetype').find('[data-toggle="dropdown"]').text(codename);
                    show_codetype_complete(codetype);
                    $('#codetype-intro').removeClass('none');
                    // $('#tools-tits').find('li').click();
                    $('#tools').addClass('disabled');
                }

            });
            $('#tools-tits_ojj').on('click','li',function(){
                console.log($(this));
                if($(this).is('.on')===true){
                    // $(this).remove('on');
                }else{
                    $(this).addClass('on').siblings().removeClass('on');
                    if($(this).html()==='LOGO'){
                        $(".color").hide();
                        $('.icons').show()
                    }else if($(this).html()==='颜色'){
                        $(".color").show();
                        $('.icons').hide()
                    }
                }
            })
            </script>
        </div>
        <link rel="stylesheet" href="//static.clewm.net/static/css/include-isdisplay_b683e70.css" class="wangYeDeYanSe">
        <div class="w-p100 p-b-lg tab-url-box wangYeDeYanSe" style="background-color: #f5f5f5;">
            <div class="w-1000 white wangYeDeYanSe">
                <link rel="stylesheet" href="//static.clewm.net/static/css/include-active-scene-article_169331a.css"
                      class="wangYeDeYanSe">
                <link rel="stylesheet" href="//static.clewm.net/static/css/lity.min_f0e73ac.css" class="wangYeDeYanSe">
                <script type="text/javascript" src="//static.clewm.net/static/js/lity.min_287ddc3.js"
                        class="wangYeDeYanSe"></script>
                <script type="text/javascript" class="wangYeDeYanSe">    /**
                 * 头部固定
                 */

                $(function () {
                    var wait_now = $('#wait_now');
                    var scrollTopHeight = $("#tab-nav").offset().top;
                    var has_fixed = $('#tab-nav').hasClass('tab_fixed');
                    var pathName = window.location.pathname;

                    // START 图片的放大缩小

                    zooming();

                    // END 图片的放大缩小

                    // tab栏切换
                    $(document).on('click', '.tab-ul [tab-item] a', function (e) {
                        e.preventDefault();

                        var id = $(this).parent().attr('tab-id');
                        var path = $(this).parent().attr('tab-path');
                        var tabUrl = $(this).parent().attr('tab-url');

                        var isDispatch = $(this).parent().attr('isdispatch');
                        var that = this;


                        wait_now.show();


                        if (path == 'comment') {
                            location.href = tabUrl;
                            return;
                        }

                        if (isDispatch != 1) {
                            $(this).parent().attr('isdispatch', 1);

                            $.ajax({
                                type: "GET",
                                url: '//' + CLI_DOMAIN + '/api/tab/get_tab?id=' + id,
                                success: function (ret) {
                                    if (ret.data && ret.data.content) {
                                        repleceWordPressHtml(ret.data.content.content);
                                    }

                                    if (has_fixed) {
                                        $("body,html").scrollTop(scrollTopHeight);
                                    }

                                    $(that).parent().attr('isdispatch', 0);

                                    // 改变url参数不跳转
                                    if (window.history.pushState) {
                                        window.history.pushState({}, "页面标题", tabUrl);
                                    } else {
                                        window.location.href = '//' + CLI_DOMAIN + tabUrl;
                                    }

                                    wait_now.hide();

                                    $(that).parent().addClass('active').siblings().removeClass('active');
                                    setTimeout(function () {
                                        var $nabBtn = $("#tab-nav");
                                        var $detailBtnTab = $("#detail_btn_tab");
                                        if ($("#tab-nav").offset().top < ($(document).scrollTop() + 15)) {
                                            $nabBtn.addClass("tab_fixed");
                                            $nabBtn.prev().addClass("tab_empty_fixed");
                                            $detailBtnTab.show();
                                        }
                                    }, 400);

                                    // 百度统计
                                    _hmt.push(['_trackPageview', pathName]);
                                }
                            })
                        }
                    })

                    $(document).on('click', '#go-to-generate', function (e) {
                        e.preventDefault();
                        $('html, body').animate({
                            scrollTop: 0
                        }, 400);
                    });

                    $(document).on('click', '.lity-content img', function () {
                        $('[data-lity-close]').click();
                    });

                    function repleceWordPressHtml(html) {
                        var wordPressBox = $('#wordpress_article_info_box');

                        var _html = $(html);
                        var new_img_len = _html.find('img');

                        new_img_len.each(function (index, item) {
                            var item = $(item);
                            item.css({'height': 'auto', 'cursor': 'pointer'});
                            // item.addClass('img-zoomable');
                            item.attr('data-lity', '');
                            item.attr('data-lity-target', item.data('original') || item.attr('src'));
                        });
                        wordPressBox.html('').html(_html);
                    }

                    var nt = !1;

                    $(window).on("scroll", function () {
                        var scrollTop = $(document).scrollTop();//往下滚的高度
                        nt = nt ? nt : $("#tab-nav").offset().top;
                        var $nabBtn = $("#tab-nav");
                        var $detailBtnTab = $("#detail_btn_tab");
                        if (nt < scrollTop) {
                            $nabBtn.addClass("tab_fixed");
                            $nabBtn.prev().addClass("tab_empty_fixed");
                            $detailBtnTab.show();
                            has_fixed = true;
                        } else {
                            $nabBtn.removeClass("tab_fixed");
                            $nabBtn.prev().removeClass("tab_empty_fixed");
                            $detailBtnTab.hide();
                            has_fixed = false;
                        }
                    });
                    $('.list_tab').find('.tab-item').on('click', function () {
                        StatisticsData(63, $(this).attr('data-id'));
                    })
                    $('[weixin-contact]').on('click', function (event) {
                        event.preventDefault()
                        $('[weixin-code]').show();
                    })

                    $("[weixin-contact]").on('mouseover', function () {
                        $('[weixin-code]').show();
                    });

                    $("[weixin-contact]").on('mouseout', function () {
                        $('[weixin-code]').hide();
                    });
                })

                function zooming() {
                    var img_len = $('#wordpress_article_info_box img');

                    img_len.each(function (index, item) {
                        var item = $(item);
                        item.css({'height': 'auto', 'cursor': 'pointer'});
                        // item.addClass('img-zoomable');
                        item.attr('data-lity', '');
                        item.attr('data-lity-target', item.data('original') || item.attr('src'));
                    });
                }
                </script>
            </div>
        </div>
        <script type="text/javascript" src="//static.clewm.net/cli/js/qqserver_clicklog-jq1.9.1.js"
                class="wangYeDeYanSe"></script>
        <link rel="stylesheet" href="//static.clewm.net/cli/css/cli_foot.css?v=20180612" class="wangYeDeYanSe">
        <script class="wangYeDeYanSe">
            $(function () {
                $('.cli_foot .qq_show').hover(function (e) {
                    $('ul.qq_list').toggle();
                    e.stopPropagation();
                });
            })
        </script>
        <script src="//static.clewm.net/public/cli_analytics.js" class="wangYeDeYanSe"></script>
        <script class="wangYeDeYanSe">
            $(function () {
                $('#multiple-url').click(function () {
                    setCookie("cli_staticurl_content", $("#url_content").val());
                    window.location.href = "//" + CLI_DOMAIN + "/user/active/addActive?qrtype=url&t=url&from=front&entrance=url";
                });
                $('[data-toggle="tooltip"]').tooltip(); // 提示框初始化
            })
            // 查看案例
            $('#scene-url-case').on('click', function () {
                var url = $(this).attr('data-case-url');
                var furl = $(this).attr('data-case-furl');
                seajs.use('//' + STATIC_SERVICE + '/js/preview.js?t=20170420', function (preview) {
                    preview.mobile_preview(url, furl, '', 'yes', 'case');//引入预览层并传入地址及详情链接
                });
            });

        </script>
        <div id="iColorPicker"
             style="border: 1px solid rgb(204, 204, 204); background: rgb(51, 51, 51); padding: 5px; color: rgb(255, 255, 255); z-index: 1000; top: 582.8px; left: 980.6px; position: absolute; display: none;">
            <table class="pickerTable" id="pickerTable0" style="border-collapse: collapse;">
                <thead id="hexSection0">
                <tr>
                    <td style="background: rgb(255, 0, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ff0000"></td>
                    <td style="background: rgb(255, 255, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ffff00"></td>
                    <td style="background: rgb(0, 255, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00ff00"></td>
                    <td style="background: rgb(0, 255, 255); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00ffff"></td>
                    <td style="background: rgb(0, 0, 255); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="0000ff"></td>
                    <td style="background: rgb(255, 0, 255); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ff00ff"></td>
                    <td style="background: rgb(255, 255, 255); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ffffff"></td>
                    <td style="background: rgb(235, 235, 235); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ebebeb"></td>
                    <td style="background: rgb(225, 225, 225); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="e1e1e1"></td>
                    <td style="background: rgb(215, 215, 215); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="d7d7d7"></td>
                    <td style="background: rgb(204, 204, 204); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="cccccc"></td>
                    <td style="background: rgb(194, 194, 194); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="c2c2c2"></td>
                    <td style="background: rgb(183, 183, 183); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="b7b7b7"></td>
                    <td style="background: rgb(172, 172, 172); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="acacac"></td>
                    <td style="background: rgb(160, 160, 160); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="a0a0a0"></td>
                    <td style="background: rgb(149, 149, 149); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="959595"></td>
                </tr>
                <tr>
                    <td style="background: rgb(238, 29, 36); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ee1d24"></td>
                    <td style="background: rgb(255, 241, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="fff100"></td>
                    <td style="background: rgb(0, 166, 80); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00a650"></td>
                    <td style="background: rgb(0, 174, 239); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00aeef"></td>
                    <td style="background: rgb(47, 49, 146); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="2f3192"></td>
                    <td style="background: rgb(237, 0, 140); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ed008c"></td>
                    <td style="background: rgb(137, 137, 137); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="898989"></td>
                    <td style="background: rgb(125, 125, 125); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="7d7d7d"></td>
                    <td style="background: rgb(112, 112, 112); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="707070"></td>
                    <td style="background: rgb(98, 98, 98); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="626262"></td>
                    <td style="background: rgb(85, 85, 85); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="555555"></td>
                    <td style="background: rgb(70, 70, 70); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="464646"></td>
                    <td style="background: rgb(54, 54, 54); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="363636"></td>
                    <td style="background: rgb(38, 38, 38); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="262626"></td>
                    <td style="background: rgb(17, 17, 17); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="111111"></td>
                    <td style="background: rgb(0, 0, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="000000"></td>
                </tr>
                <tr>
                    <td style="background: rgb(247, 151, 122); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="f7977a"></td>
                    <td style="background: rgb(251, 173, 130); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="fbad82"></td>
                    <td style="background: rgb(253, 198, 140); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="fdc68c"></td>
                    <td style="background: rgb(255, 247, 153); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="fff799"></td>
                    <td style="background: rgb(198, 223, 156); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="c6df9c"></td>
                    <td style="background: rgb(164, 212, 157); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="a4d49d"></td>
                    <td style="background: rgb(129, 202, 157); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="81ca9d"></td>
                    <td style="background: rgb(123, 205, 201); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="7bcdc9"></td>
                    <td style="background: rgb(108, 207, 247); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="6ccff7"></td>
                    <td style="background: rgb(124, 166, 216); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="7ca6d8"></td>
                    <td style="background: rgb(130, 147, 202); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="8293ca"></td>
                    <td style="background: rgb(136, 129, 190); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="8881be"></td>
                    <td style="background: rgb(162, 134, 189); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="a286bd"></td>
                    <td style="background: rgb(188, 140, 191); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="bc8cbf"></td>
                    <td style="background: rgb(244, 155, 193); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="f49bc1"></td>
                    <td style="background: rgb(245, 153, 157); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="f5999d"></td>
                </tr>
                <tr>
                    <td style="background: rgb(241, 108, 77); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="f16c4d"></td>
                    <td style="background: rgb(246, 142, 84); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="f68e54"></td>
                    <td style="background: rgb(251, 175, 90); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="fbaf5a"></td>
                    <td style="background: rgb(255, 244, 103); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="fff467"></td>
                    <td style="background: rgb(172, 211, 114); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="acd372"></td>
                    <td style="background: rgb(125, 196, 115); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="7dc473"></td>
                    <td style="background: rgb(57, 183, 120); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="39b778"></td>
                    <td style="background: rgb(22, 188, 180); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="16bcb4"></td>
                    <td style="background: rgb(0, 191, 243); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00bff3"></td>
                    <td style="background: rgb(67, 140, 203); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="438ccb"></td>
                    <td style="background: rgb(85, 115, 183); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="5573b7"></td>
                    <td style="background: rgb(94, 92, 167); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="5e5ca7"></td>
                    <td style="background: rgb(133, 95, 168); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="855fa8"></td>
                    <td style="background: rgb(167, 99, 169); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="a763a9"></td>
                    <td style="background: rgb(239, 110, 168); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ef6ea8"></td>
                    <td style="background: rgb(241, 109, 126); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="f16d7e"></td>
                </tr>
                <tr>
                    <td style="background: rgb(238, 29, 36); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ee1d24"></td>
                    <td style="background: rgb(241, 101, 34); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="f16522"></td>
                    <td style="background: rgb(247, 148, 29); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="f7941d"></td>
                    <td style="background: rgb(255, 241, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="fff100"></td>
                    <td style="background: rgb(143, 198, 61); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="8fc63d"></td>
                    <td style="background: rgb(55, 180, 74); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="37b44a"></td>
                    <td style="background: rgb(0, 166, 80); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00a650"></td>
                    <td style="background: rgb(0, 169, 158); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00a99e"></td>
                    <td style="background: rgb(0, 174, 239); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00aeef"></td>
                    <td style="background: rgb(0, 114, 188); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="0072bc"></td>
                    <td style="background: rgb(0, 84, 165); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="0054a5"></td>
                    <td style="background: rgb(47, 49, 146); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="2f3192"></td>
                    <td style="background: rgb(101, 44, 145); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="652c91"></td>
                    <td style="background: rgb(145, 39, 143); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="91278f"></td>
                    <td style="background: rgb(237, 0, 140); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ed008c"></td>
                    <td style="background: rgb(238, 16, 90); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="ee105a"></td>
                </tr>
                <tr>
                    <td style="background: rgb(157, 10, 15); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="9d0a0f"></td>
                    <td style="background: rgb(161, 65, 13); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="a1410d"></td>
                    <td style="background: rgb(163, 98, 9); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="a36209"></td>
                    <td style="background: rgb(171, 160, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="aba000"></td>
                    <td style="background: rgb(88, 133, 40); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="588528"></td>
                    <td style="background: rgb(25, 123, 48); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="197b30"></td>
                    <td style="background: rgb(0, 114, 54); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="007236"></td>
                    <td style="background: rgb(0, 115, 106); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="00736a"></td>
                    <td style="background: rgb(0, 118, 164); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="0076a4"></td>
                    <td style="background: rgb(0, 74, 128); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="004a80"></td>
                    <td style="background: rgb(0, 51, 112); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="003370"></td>
                    <td style="background: rgb(29, 19, 99); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="1d1363"></td>
                    <td style="background: rgb(69, 14, 97); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="450e61"></td>
                    <td style="background: rgb(98, 5, 95); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="62055f"></td>
                    <td style="background: rgb(158, 0, 92); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="9e005c"></td>
                    <td style="background: rgb(157, 0, 57); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="9d0039"></td>
                </tr>
                <tr>
                    <td style="background: rgb(121, 0, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="790000"></td>
                    <td style="background: rgb(123, 48, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="7b3000"></td>
                    <td style="background: rgb(124, 73, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="7c4900"></td>
                    <td style="background: rgb(130, 122, 0); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="827a00"></td>
                    <td style="background: rgb(62, 102, 23); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="3e6617"></td>
                    <td style="background: rgb(4, 95, 32); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="045f20"></td>
                    <td style="background: rgb(0, 88, 36); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="005824"></td>
                    <td style="background: rgb(0, 89, 81); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="005951"></td>
                    <td style="background: rgb(0, 91, 126); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="005b7e"></td>
                    <td style="background: rgb(0, 53, 98); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="003562"></td>
                    <td style="background: rgb(0, 32, 86); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="002056"></td>
                    <td style="background: rgb(12, 0, 75); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="0c004b"></td>
                    <td style="background: rgb(48, 0, 74); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="30004a"></td>
                    <td style="background: rgb(75, 0, 72); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="4b0048"></td>
                    <td style="background: rgb(122, 0, 69); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="7a0045"></td>
                    <td style="background: rgb(122, 0, 38); width: 12px; height: 14px; border: 1px solid rgb(0, 0, 0); cursor: pointer;"
                        hx="7a0026"></td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="border: 1px solid rgb(0, 0, 0); background: rgb(245, 153, 157); cursor: pointer; height: 50px; width: 12px;"
                        colspan="16" align="center" id="colorPreview"><input id="icolortext" type="text" maxlength="7"
                                                                             size="8"
                                                                             style="color:#000;border:1px solid rgb(0, 0, 0);padding:5px;background-color:#fff;font:11px Arial, Helvetica, sans-serif;"><a
                            id="colorOk"
                            style="color: #000;padding:3px 4px;cursor;border:1px solid #CCC;background:#FFFFFF">确定</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <style>#iColorPicker input {
                margin: 2px
            }</style>
        </div>
        <div id="iColorPickerBg"
             style="position: fixed; top: 0px; left: 0px; z-index: 99; width: 100%; height: 100%; display: none;"></div>
    </body>
</div>
</body>
</html>
